<template>
  <div class="lin_subscribe">
    <div class="lin_subscribe_content">
      <div>
        <h2>Subscribe to Selene's Newsletter</h2>
      </div>
      <div>
        <p>I occasionally write articles about operations, front-end and back-end,</p>
        <p>and share ideas about the intersection of creativity and engineering</p>
      </div>
      <div class="lin_subscribe_content_input">
        <el-form
          :rules="emailPattern"
        >
          <input type="text" name="email" v-model="email_info" required  placeholder="info@email.com" />
          <el-button  @click="email_check">subscribe</el-button>
        </el-form>

      </div>
    </div>
  </div>

</template>

<script setup lang="ts">

const email_info = ref()


const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

const email_check = async () => {
  if (email_info.value == null){
    alert('请输入邮箱地址！');
  }
  else if(!email_info.value.match(emailPattern)) {
    alert('请输入有效的邮箱地址！');
  }
  else {
    alert('邮箱地址有效，可以订阅！');
  }
}

</script>

<style scoped lang="scss">

.lin_subscribe {
  position: relative;
  display: flex;
}

.lin_subscribe_content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: auto;
  width: 984px;
  border-radius: 15px;
  border:1px  solid var(--scheme-black-100);
}

.lin_subscribe_content div {
  padding: 10px 10px;
}

.lin_subscribe_content_input {
  display: flex;
  justify-content: center;
}

.lin_subscribe_content_input form {
  display: flex;
  justify-content: center;
  align-items: center;
}

.lin_subscribe_content_input input {
    max-width: 170px;
    height: 40px;
    outline: none;
    padding-left: 15px;
    border:1px solid var(--scheme-moss-800);
    border-radius: 15px;
    margin-right: 10px;
    font-size: 1em;
}

.lin_subscribe_content_input button {
  background: var(--color-background);
  border: none;
  border-radius: 15px;
  height: 35px;
  width: 70px;
  color: white;
}

.lin_subscribe_content_input button:hover {
  background: #67c23a;
  transform: scale(0.9);
  transition: all 0.3s ease;
}

@media screen and (max-width: 990px) {
  .lin_subscribe {
    font-size: 12px;
  }
  .lin_subscribe_content {
    width: 800px;
  }
}



@media screen and (max-width: 300px) {
  .lin_subscribe_content_input input {
    height: 28px;
  }
  .lin_subscribe_content_input button {
    height: 28px;
    width: 50px;
    font-size: 10px;
  }
}

@media screen and (max-width: 190px) {
  .lin_subscribe_content_input input {
    height: 20px;
    margin-right: 5px;
  }
  .lin_subscribe_content_input button {
    height: 20px;
    width: 50px;
    font-size: 9px;
  }
}

</style>